<template>
  <div>
    <nav-top @callback="callback"></nav-top>
    <div class="form">
      <input type="text" v-model="oldpassword" placeholder="原密码：" />
      <input type="text" v-model="password" placeholder="新密码：" />
      <input type="text" v-model="verify_pwd" placeholder="确认新密码：" />
      <div class="btn">
        <div @click="callback" class="center">取消</div>
        <div class="submit" @click="submit">确认</div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from "vuex";
  export default {
    name: "ChangePW",
    computed: {
      ...mapGetters(["proxy_id"])
    },
    data() {
      return {
        oldpassword: "",
        password: "",
        verify_pwd: ""
      };
    },
    methods: {
      callback() {
        this.$router.go(-1);
      },
      submit() {
        if (this.password != this.verify_pwd)
          return this.$toast("两次输入的新密码不一致，请确认后再尝试");
        this.Http.changePW({
          id: this.proxy_id,
          old_pwd: this.oldpassword,
          new_pwd: this.password,
          verify_pwd: this.verify_pwd,
          type: 1
        })
          .then(res => {
            // console.log(res);
            this.$router.push("/home");
          })
          .catch(e => {
            this.$toast(e.msg);
          });
      }
    }
  };
</script>
<style lang="less" scoped>
  .form {
    padding: 0 51px 0 69px;
    input {
      width: 100%;
      display: block;
      height: 28px;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 36px;
      padding: 43px 0 24px 0;
      border-bottom: 1px solid rgba(213, 210, 212, 1);
      &::placeholder {
        color: rgba(181, 181, 181, 1);
      }
    }
    .btn {
      margin-top: 90px;
      display: flex;
      div {
        flex: 1;
        text-align: center;
      }
      .center {
        background-image: linear-gradient(
          to left,
          rgba(255, 133, 122, 1),
          rgba(255, 81, 66, 1)
        );
        border-radius: 0.31rem;
        line-height: 2.8rem;
        color: #fff;
        margin-right: 50px;
      }
      .submit {
        color: #fff;
        line-height: 2.8rem;
        background-image: linear-gradient(to right, #0297ff, #14c7ff);
        border-radius: 0.31rem;
      }
    }
  }
</style>